<template>
  <div class="choose-userlist">
    <section v-if="config.model !== 'normal'">
      <!-- <el-button class="mar-b-20" type="primary" size="mini" @click="toggle">指定商品</el-button> -->
    </section>
    <!-- @close="output" -->
    <el-dialog
      custom-class="wlm-form-dialog dialog-table"
      width="50%"
      :visible.sync="dialogTableVisible"
      @close="clearData"
      @open="dialogGetData"
    >
      <div class="wlm-dialog-fixheader">
        <span class="wlm-dialog-inlenr">链接选择器</span>
        <!-- {{link_type}} -->
        <!-- {{this.tableFormatData.userTable.files}} -->
      </div>
      <!-- <el-scrollbar> -->
      <div class="wlm-table-content">
        <div class="wlm-dialog-main">
          <div class="flex-row">
            <el-scrollbar>
              <div class="link-menu">
                <el-menu
                  ref="el-menu"
                  class="el-menu-vertical-demo"
                  @select="handleSelect"
                >
                  <el-submenu
                    :index="`${item.id}`"
                    v-for="(item, index) in menuData"
                    :key="index"
                  >
                    <template slot="title">
                      <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item-group
                      v-if="Array.isArray(item.list) && item.list.length > 0"
                    >
                      <el-menu-item
                        class="ellipsis"
                        style="display: block"
                        v-for="(childItem, childIndex) in item.list"
                        :key="childIndex"
                        :index="`${childItem.type}`"
                        >{{ childItem.title }}</el-menu-item
                      >
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu>
              </div>
            </el-scrollbar>
            <el-scrollbar style="width: 100%; height: 500px; max-height: 520px">
              <div class="goods-list-box">
                <template v-if="!noFilterDataMap.includes($cateType)">
                  <div class="goods-serch">
                    <el-input
                      v-model="tableFormatData.userTable.files.name"
                      placeholder="搜索名称"
                    ></el-input
                    ><i
                      class="el-icon-search pos-col-center"
                      @click="filesSerch"
                    ></i>
                  </div>
                  <el-table
                    v-if="!isGroupsShow"
                    :data="$tableDataFilter"
                    :row-style="{ cursor: 'pointer' }"
                    @row-click="tableRowClick"
                  >
                    <el-table-column label="" width="55" v-if="!($type === 'lottery'&&config.params_type && config.params_type=='periods_radio')">
                      <template slot-scope="scope">

                        <span
                          class="el-radio__input"
                          v-if="
                            hasKeyId(scope) &&
                            isChooseType &&
                            $type != 'envelope'
                          "
                          :class="{
                            'is-checked': currentRow.includes(hasKeyId(scope)),
                          }"
                          @click="chooseGoods(hasKeyId(scope), scope.row)"
                        >
                          <span class="el-radio__inner"></span>
                        </span>
                        <span
                          class="el-radio__input"
                          v-if="$type == 'envelope'"
                          :class="{
                            'is-checked': currentRow.includes(hasKeyId(scope)),
                          }"
                          @click="handleSelectionChange(scope.row)"
                        >
                          <span class="el-radio__inner"></span>
                        </span>
                        <!-- <el-checkbox v-if="$type == 'envelope'" v-model="scope.row.checked" @change="handleSelectionChange(scope.row)"></el-checkbox> -->
                      </template>
                    </el-table-column>
                    <el-table-column label="名称" v-if="$type !== 'spike'">
                      <template slot-scope="scope">
                        <p
                          :class="{
                            'is-checked': currentRow.includes(hasKeyId(scope)),
                          }"
                        >
                          {{
                            scope.row.title ||
                            scope.row.luck_title ||
                            scope.row.name
                          }}
                        </p>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="路径"
                      v-if="
                        $type !== 'spike' &&
                        $type !== 'group' &&
                        $type !== 'lottery' &&
                        $type !== 'bargain' &&
                        $type !== 'envelope'
                      "
                    >
                      <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                          <p>路径: {{ scope.row.path }}</p>
                          <div slot="reference" class="wlm-table-wrapper">
                            <p
                              :class="{
                                'is-checked': currentRow.includes(
                                  scope.row.path
                                ),
                              }"
                            >
                              {{ scope.row.path }}
                            </p>
                          </div>
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column label="活动名称" v-if="$type === 'spike'">
                      <template slot-scope="scope">
                        <p
                          :class="{
                            'is-checked': currentRow.includes(scope.row.id),
                          }"
                        >
                          {{ scope.row.title }}
                        </p>
                      </template>
                    </el-table-column>
                    <el-table-column label="活动时间" v-if="$type === 'spike'">
                      <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                          <p>
                            {{
                              scope.row.start_time
                                | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                            }}
                            -
                            {{
                              scope.row.end_time
                                | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                            }}
                          </p>
                          <div slot="reference" class="wlm-table-wrapper">
                            <p
                              :class="{
                                'is-checked': currentRow.includes(scope.row.id),
                              }"
                            >
                              {{
                                scope.row.start_time
                                  | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                              }}
                              -
                              {{
                                scope.row.end_time
                                  | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                              }}
                            </p>
                          </div>
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="活动时间"
                      v-if="$type === 'bargain' || $type === 'envelope'"
                    >
                      <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                          <p>
                            {{
                              scope.row.start_time
                                | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                            }}
                            -
                            {{
                              scope.row.end_time
                                | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                            }}
                          </p>
                          <div slot="reference" class="wlm-table-wrapper">
                            <p
                              :class="{
                                'is-checked': currentRow.includes(scope.row.id),
                              }"
                            >
                              {{
                                scope.row.start_time
                                  | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                              }}
                              -
                              {{
                                scope.row.end_time
                                  | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                              }}
                            </p>
                          </div>
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column label="添加时间" v-if="$type === 'spike'">
                      <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                          <p>{{ scope.row.create_time }}</p>
                          <div slot="reference" class="wlm-table-wrapper">
                            <p
                              :class="{
                                'is-checked': currentRow.includes(scope.row.id),
                              }"
                            >
                              {{ scope.row.create_time }}
                            </p>
                          </div>
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="创建时间"
                      v-if="$type === 'lottery'"
                    >
                      <template slot-scope="scope">
                        <p
                          :class="{
                            'is-checked': currentRow.includes(
                              scope.row.luck_id
                            ),
                          }"
                        >
                          {{ scope.row.create_time }}
                        </p>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="活动时间"
                      v-if="$type === 'group'"
                      min-width="140"
                    >
                      <template slot-scope="scope">
                        <p>
                          {{
                            (Number(scope.row.stime) * 1000)
                              | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                          }}
                          至
                        </p>
                        <p>
                          {{
                            (Number(scope.row.etime) * 1000)
                              | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
                          }}
                        </p>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="商品数"
                      v-if="$type === 'group'"
                      min-width="60"
                    >
                      <template slot-scope="scope">
                        <span v-if="scope.row.goods">{{
                          scope.row.goods.length
                        }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
                <template v-if="$cateType === 'custorm'">
                  <div class="wlm-form">
                    <div class="wlm-form-content">
                      <el-form
                        ref="wlmform"
                        :model="formFormatData.formData"
                        :rules="formFormatData.rules"
                        size="small"
                        label-width="140px"
                        class="retail-form"
                        label-position="right"
                      >
                        <el-form-item
                          v-if="$filesType == '12'"
                          label="链接地址"
                        >
                          <el-input
                            v-model="formFormatData.formData.link_path"
                            style="width: 270px; margin-right: 6px"
                          >
                          </el-input>
                          <div class="form-help" style="width: 75%">
                            公众号请以https://或http://开头,
                            小程序跳转链接必须使用已配置的<span class="pointer"
                              >业务域名</span
                            >
                          </div>
                        </el-form-item>
                         <el-form-item v-if="$filesType == '99'" label="链接地址">
                            <el-input v-model="formFormatData.formData.inside" style="width:270px;margin-right:6px;">
                            </el-input>
                            <div class="form-help" style="width:75%;">小程序内部链接</div>
                        </el-form-item>
                        <div
                          class="font-14"
                          style="padding-bottom: 20px"
                          v-if="$filesType == '13'"
                        >
                          <i class="el-icon-tickets orders-blue"></i>
                          此功能仅支持小程序之间的跳转，不支持从其他渠道跳转小程序。
                        </div>
                        <el-form-item
                          v-if="$filesType == '13'"
                          label="小程序AppId"
                        >
                          <div class="flex-row flex-align-c">
                            <!-- {{formFormatData.formData.app_id}} -->
                            <el-input
                              v-model="formFormatData.formData.app_id"
                              style="width: 270px; margin-right: 10px"
                            >
                            </el-input>
                            <el-dropdown @command="dropdownAppId">
                              <span class="el-dropdown-link pointer">选择</span>
                              <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                  v-for="(item, index) in appidList"
                                  :key="index"
                                  :command="item.value"
                                  >{{ item.value }}</el-dropdown-item
                                >
                              </el-dropdown-menu>
                            </el-dropdown>
                          </div>
                          <div class="form-help" style="width: 75%">
                            跳转其他小程序功能，需先配置可跳转小程序名单。可在“渠道--小程序--编辑”中配置可以跳转的小程序
                          </div>
                        </el-form-item>
                        <el-form-item
                          v-if="$filesType == '13'"
                          label="小程序路径"
                        >
                          <el-input
                            v-model="formFormatData.formData.app_path"
                            style="width: 270px; margin-right: 6px"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          v-if="$filesType == '14'"
                          label="添加电话号码链接"
                          class="custorm-mobile"
                        >
                          <el-input
                            v-model="formFormatData.formData.mobile"
                            style="width: 270px; margin-right: 6px"
                            ><template slot="prepend">电话</template>
                          </el-input>
                          <p class="form-help">
                            注意：输入正确电话号码方便客户联系你
                          </p>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </template>
                <template v-if="isGroupsShow">
                  <div>
                    <el-button
                      type="text"
                      @click="backGroupList"
                      style="margin-bottom: 2px"
                      >返回</el-button
                    >
                    <div class="flex-row" style="flex-wrap: wrap">
                      <div
                        class="flex-row dialogChange"
                        v-for="(item, index) in tableFormatData.userTable
                          .tableData"
                        :key="index"
                      >
                        <div
                          class="group-box flex-row"
                          v-if="item && $type === 'group'"
                          style="margin-right: 14px; width: 100%"
                        >
                          <div class="group-icon">拼团</div>
                          <img
                            v-if="item.image"
                            :src="item.image.file_path"
                            style="
                              margin-right: 10px;
                              flex-shrink: 0;
                              border-radius: 10px;
                            "
                            height="80"
                            width="90"
                            alt=""
                          />
                          <div
                            class="flex-col flex-justify-b"
                            style="width: 100%"
                          >
                            <div
                              class="ellipsis dialogTextChange"
                              style="font-size: 14px"
                            >
                              {{ item.goods_name }}
                            </div>
                            <div class="group-item-btn flex-row flex-justify-e">
                              <el-button
                                :disabled="hasDisabled(item)"
                                :class="{
                                  'is-active': listRow.includes(item.goods_id),
                                }"
                                type="primary"
                                round
                                plain
                                size="mini"
                                style="font-size: 12px"
                                @click="chooseGroupList(item.goods_id, item)"
                                >{{
                                  `${
                                    listRow.includes(item.goods_id)
                                      ? "取消"
                                      : "选择"
                                  }`
                                }}</el-button
                              >
                            </div>
                            <div
                              class="flex-row flex-justify-b"
                              style="font-size: 14px"
                            >
                              <div class="orders-red">
                                ￥{{ item.groups_price }}
                              </div>
                              <div>库存:{{ item.groups_stock }}</div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="group-box flex-row"
                          v-if="item && $type === 'spike'"
                          style="margin-right: 14px; width: 100%"
                        >
                          <div class="group-icon">秒杀</div>
                          <img
                            v-if="item.image"
                            :src="
                              item.image && item.image[0]
                                ? item.image[0].file_path
                                : ''
                            "
                            style="
                              margin-right: 10px;
                              flex-shrink: 0;
                              border-radius: 10px;
                            "
                            height="80"
                            width="90"
                            alt=""
                          />
                          <div
                            class="flex-col flex-justify-b"
                            style="width: 100%"
                          >
                            <div
                              class="ellipsis dialogTextChange"
                              style="font-size: 14px"
                            >
                              {{ item.goods_name }}
                            </div>
                            <div class="group-item-btn flex-row flex-justify-e">
                              <el-button
                                :disabled="hasDisabled(item)"
                                :class="{
                                  'is-active': listRow.includes(item.goods_id),
                                }"
                                type="primary"
                                round
                                plain
                                size="mini"
                                style="font-size: 12px"
                                @click="chooseGroupList(item.goods_id, item)"
                                >{{
                                  `${
                                    listRow.includes(item.goods_id)
                                      ? "取消"
                                      : "选择"
                                  }`
                                }}</el-button
                              >
                            </div>
                            <div
                              class="flex-row flex-justify-b"
                              style="font-size: 14px"
                            >
                              <div class="orders-red">￥{{ item.price }}</div>
                              <div>库存:{{ item.stock }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="" v-if="$type === 'lottery'">
                        <div>
                          <el-radio v-model="hasChooseLottery" @change="hasChooseLotteryLook" :label="item"
                           v-for="(item,index) in lotteryRow.luck_periods "
                           style="margin:10px"
                           :key="index"
                            border
                            >第{{item.luck_period_id}}期</el-radio
                          >

                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <!-- </el-scrollbar> -->
      <div
        v-if="!noFilterDataMap.includes($cateType)"
        class="pagination-content flex-row flex-justify-b flex-align-c"
      >
        <el-row class="pagination-btns"> </el-row>
        <el-pagination
        v-if="!isGroupsShow && !showPage && !keycation"
          style="margin-top: 20px; margin-bottom: 20px; margin-right: 25px"
          :disabled="!hasTableData"
          @size-change="listPageChange"
          @current-change="listPageChange"
          :current-page.sync="tableFormatData.userTable.pagination.page"
          :page-sizes="tableFormatData.userTable.pagination.pagesizes"
          :page-size.sync="tableFormatData.userTable.pagination.list_rows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="hasTableData ? tableFormatData.userTable.pagination.total : 0"
        >
        </el-pagination>
      </div>
      <div class="wlm-dialog-fixfooter">
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="toggle">取 消</el-button>
          <el-button size="small" type="primary" @click="saveChoose"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWeChatPathCatalog,
  getWeChatUrlPath,
  getWeChatGroupsGoods,
  getWeChatSpikeGoods,
} from "@/api/resource";
import { getWxAppIdInfo } from "@/api/channel";
import { tooggleArray } from "@/utils/index";
import mixins from "@/mixins/mixins";
import defaultConfig from "./utils/config";
// import {
//   tooggleArray
// } from '@/utils/index'
export default {
  mixins: [defaultConfig.mixins, mixins.getters("Table")],
  props: {
    defaultConfig: {
      type: Object,
      default: function () {
        return defaultConfig;
      },
    },
    isShow: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    "config.link_type": {

      handler(newData, oldData) {
         console.log(this.config,"473333333333333333333333333333333333333332")
         if(this.config.params_type){
           if(this.config.params_type=='"periods_radio"'){
             this.period_show=true;
             console.log( this.period_show)
           }
         }
        if (
          newData &&
          typeof newData === "string" &&
          [
            "1",
            "2",
            "spike",
            "group",
            "lottery",
            "bargain",
            "activity",
            "envelope",
          ].includes(newData)
        ) {
          this.link_type = newData;
        }
      },
      immediate: true,
      deep: false,
    },
  },
  data() {
    return {
      period_show:false,//判断来源，弹窗为true
      isGroupsShow: false,
      showPage:false,//抽奖选择期数不显示页数
      keycation:false,//导航，基本，订单，子链接不显示页数
      noFilterDataMap: ["custorm"],
      defaultProps: {
        children: "child",
        label: "name",
      },
      lotteryRow: {}, //选择中的抽奖活动
      hasChooseLottery:{},//选中的期数
      filesMap: {
        8: "spike",
        10: "group",
        11: "lottery",
        15: "bargain",
        16: "envelope",
      },
      chooseTypeMap: {
        spike: "2",
        group: "2",
        lottery: "1",
        bargain: "1",
      },
      requestApi: {
        group: getWeChatGroupsGoods,
        spike: getWeChatSpikeGoods,
        normal: getWeChatUrlPath,
      },
      link_type: "1",
      displayData: [],
      menuData: [],
      appidList: [],
      currentRow: [],
      listData: [],
      listRow: [],
      closable: true,
      dialogTableVisible: false,
      formFormatData: {
        key: "userForm",
        formData: {
          link_path: '',
          inside:'',
          app_id: '',
          app_path: '',
          mobile: ''
        },
        rules: {},
      },
      tableFormatData: {
        current: "userTable",
        userTable: {
          key: "userTable",
          api: {
            getList: getWeChatUrlPath,
            noCreate: true,
          },
          tableData: [],
          files: {
            name: "",
            ids: [],
            type: "",
            cateType: "",
            checkall: "0",
            category_id: "",
          },
          otherData: {},
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0,
          },
        },
      },
    };
  },
  computed: {
    hasKeyId() {
      return function (scope) {
        const {
          row: { path, id, luck_id, groups_id },
        } = scope;
        return path || id || luck_id || groups_id;
      };
    },
    $tableDataFilter() {
      // return Array.isArray(this.tableFormatData.userTable.tableData) ? this.tableFormatData.userTable.tableData.filter(item => item !== 'null') : []
      // console.log("this.tableFormatData.userTable.files.type",this.tableFormatData.userTable.files.type)
      if(this.tableFormatData.userTable.files.type==1||this.tableFormatData.userTable.files.type==7 ||this.tableFormatData.userTable.files.type==2 || this.tableFormatData.userTable.files.type==3){
        this.keycation = true
      return this.tableFormatData.userTable.tableData.filter((item) =>item !== "null");

      }else{
        this.keycation = false
      return this.tableFormatData.userTable.tableData.filter((item) =>item !== "null");

      }
    },
    $isUnique() {
      return ["bargain"].includes(this.$type);
    },
    $type() {
      if (["activity"].includes(this.$cateType)) {
        return this.filesMap[`${this.$filesType}`];
      }
      return this.link_type;
    },
    isChooseType() {
      /**
       * @description 判断选择类型
       * @param {String} link_type activity代表是活动链接，具体展示某一类型的活动是否是单选，其他为对应的链接目录
       * @param {String} config.choose_type 1代表单选 2为选择后再选择对应商品 3待定还未使用
       * @param {String} defaultConfig.choose_type 1代表单选 2为选择后再选择对应商品 此处为默认保留参数
       * @return {Boolean}  是否为单选
       */
      return this.link_type !== "activity"
        ? (this.config.choose_type || this.defaultConfig.choose_type) === "1"
        : this.chooseTypeMap[`${this.$type}`] === "1";
    },
    $filesType() {
      return this.tableFormatData.userTable.files.type;
    },
    $cateType() {
      return this.tableFormatData.userTable.files.cateType;
    },
    hasDisabled(item) {
      return (item) => {
        let hasDisabled = false;
        const disabled = this.config.disabled;
        if (Array.isArray(disabled) && disabled.length > 0) {
          disabled.map((lableItem) => {
            const hasValue = lableItem.reverse
              ? item[`${lableItem.label}`] !== lableItem.value
              : item[`${lableItem.label}`] === lableItem.value;
            if (hasValue) {
              hasDisabled = true;
            }
            return hasValue;
          });
        }
        return hasDisabled;
      };
    },
  },
  mounted() {
    console.log(  this.config,"xoooooooooooooooooooooooooooooox")
  //  if(this.defaultConfig.params.params_type){
  //    if(this.defaultConfig.params.params_type==='periods_radio')
  //    this.period_show=true
  //  }
    // if (this.$type === 'envelope') {
    // }
  },
  methods: {
    hasChooseLotteryLook(){
    console.log(this.hasChooseLottery)
    },
    handleSelectionChange(row) {
      console.log(row, "row");
      this.currentRow = tooggleArray(this.currentRow, row.id);
      if (this.currentRow.includes(row.id)) {
        this.displayData.push(row);
      } else {
        const newIndex = this.displayData.findIndex((displayItem) => {
          return displayItem.id === row.id;
        });
        this.displayData.splice(newIndex, 1);
      }
      console.log(this.displayData, "this.displayData");
    },
    backGroupList() {
      this.tableFormatData.userTable.api.getList = this.requestApi.normal;
      this.tableFormatData.userTable.pagination.page = 1;
      this.isGroupsShow = false;
      this.showPage=false
      this.getTableList();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath, "key,keyPath");
      const [cateType] = keyPath;
      this.tableFormatData.userTable.files.type = key;
      this.tableFormatData.userTable.files.cateType = cateType;
      this.backGroupList();
      this.getOther();
      //导航链接，基本链接，订单链接，子链接不显示分页，因为后端写死的
      if(this.tableFormatData.userTable.files.type==1||this.tableFormatData.userTable.files.type==7 ||this.tableFormatData.userTable.files.type==2 || this.tableFormatData.userTable.files.type==3){
        this.keycation = true
      }else{
        this.keycation = false

      }
    },
    tableRowClick(row) {
      console.log(
        this.$type,
        this.config.choose_type,
        "this.$type"
      );
      console.log(
        this.config.choose_type,
        "this.requestApi[`${this.$type}`]=>"
      );
      if (`${this.config.choose_type}` === "2") {
        if (this.$type === "group") {
          this.toggleListData(
            this.requestApi[`${this.$type}`],
            row.groups_id,
            "group_id"
          );
        } else if (this.$type === "spike") {
          this.toggleListData(
            this.requestApi[`${this.$type}`],
            row.id,
            "spike_id"
          );
        }
        // console.log(this.requestApi[`${this.$type}`], 'this.requestApi[`${this.$type}`]=>')
      }

      console.log("................",this.$type)
      if (this.$type === "lottery" ) {
        if( this.config.params_type && this.config.params_type=='periods_radio'){
            //新增抽奖选择期数
        console.log(row,'-------------------------');
        this.lotteryRow = row;
         this.isGroupsShow = true;
         this.showPage=true

        }

      }
    },
    dialogGetData() {
      this.tableFormatData.userTable.api.noCreate = false;
      this.getLikeList();
    },
    dropdownAppId(app_id) {
      console.log(this.formFormatData.formData.app_id);
      this.formFormatData.formData.app_id = app_id;
      console.log(this.formFormatData.formData.app_id);
    },
    toggleListData(api, id, key) {
      this.tableFormatData.userTable.api.getList = api;
      id && (this.tableFormatData.userTable.files[`${key}`] = id);
      this.tableFormatData.userTable.tableData = [];
      this.isGroupsShow = true;
      this.tableFormatData.userTable.pagination.page = 1;
      this.getTableList();
      console.log(this.tableFormatData.userTable.tableData);
    },
    getLikeList() {
      // getWeChatPathCatalog({ type: this.link_type }).then((response) => {
      getWeChatPathCatalog({ type: this.link_type }).then((response) => {
        const {
          data: { data: msgData = [] },
        } = response;
        this.menuData = msgData;
        const [
          {
            list: [{ type }],
          },
        ] = msgData;
        if (type) {
          this.tableFormatData.userTable.files.type = type;
          this.getTableList();
        }
      });
    },
    getOther() {
      if (`${this.tableFormatData.userTable.files.type}` === "13") {
        getWxAppIdInfo().then((res) => {
          const {
            data: {
              data: { appid = [] },
            },
          } = res;
          this.appidList = appid;
        });
      }
    },
    clearData() {
      this.currentRow = [];
      this.displayData = [];
      this.listRow = [];
      this.listData = [];
      this.tableFormatData.userTable.api.getList = this.requestApi.normal;
      this.tableFormatData.userTable.tableData = [];
      this.tableFormatData.userTable.files.type = "";
      this.isGroupsShow = false;

      this.formFormatData.formData = {
        inside:'',
        link_path: '',
        app_id: '',
        app_path: '',
        mobile: ''
      }

      this.$refs["el-menu"]["openedMenus"].map((item) => {
        this.$refs["el-menu"]["close"](item);
      });

      this.$refs["el-menu"]["activeIndex"] = "";
      this.$emit("toggleEvt", { isShow: this.dialogTableVisible });
    },
    toggle() {
      this.dialogTableVisible = !this.dialogTableVisible;
      this.$emit("toggleEvt", { isShow: this.dialogTableVisible });
    },
    saveChoose() {

      this.toggle();
      this.output();
      this.$emit("toggleEvt", { isShow: this.dialogTableVisible });
    },
    chooseGoods(ids, item) {
      if (!this.$isUnique) {
        this.currentRow = [ids];
      } else {
        this.currentRow = tooggleArray(this.currentRow, ids);
      }
      if (this.currentRow.includes(ids)) {
        if (!this.$isUnique) {
          this.displayData = [item];
        } else {
          this.displayData.push(item);
        }
      } else {
        const newIndex = this.displayData.findIndex((displayItem) => {
          return displayItem.category_id === ids;
        });
        this.displayData.splice(newIndex, 1);
      }
    },
    chooseGroupList(ids, item) {
      console.log(ids, item);
      this.listRow = tooggleArray(this.listRow, ids);
      if (this.listRow.includes(ids)) {
        const {
          goods_name,
          groups_price,
          price,
          groups_stock,
          stock,
          image,
          already_spell,
          is_sold,
          original_price,
          group_number,
          goods_id,
        } = item;
        const scopeItem = {
          goods_name,
          groups_price,
          price,
          groups_stock,
          stock,
          image,
          already_spell,
          goods_id,
          is_sold,
          original_price,
          group_number,
        };
        scopeItem[`${this.$type}_id`] = this.tableFormatData.userTable.files[
          `${this.$type}_id`
        ];
        this.listData.push(scopeItem);
      } else {
        const newIndex = this.listData.findIndex((displayItem) => {
          return displayItem.goods_id === ids;
        });
        this.listData.splice(newIndex, 1);
      }
    },
    filesOutPutChooes() {
      const cateType = this.$cateType;
      if (this.noFilterDataMap.includes(cateType)) {
        const formData = this.formFormatData.formData;
        const type = this.tableFormatData.userTable.files.type;
        switch (cateType) {
          case "custorm":
            this.displayData.push({
              type,
              lickCate: 'custorm',
              // path: this.$filesType === '14' ? formData.mobile : (this.$filesType === '13' ? formData.app_path : formData.link_path),
              path: this.$filesType === '14' ? formData.mobile : (this.$filesType === '13' ? formData.app_path :(this.$filesType === '99'?formData.inside:formData.link_path)),
              // path: this.$filesType === '14' ? formData.mobile : (this.$filesType === '13' ? `${formData.app_id},${formData.app_path}` : formData.link_path)
              // mobile: formData.mobile,
              app_id: formData.app_id,
              // app_path: formData.app_path
            });
            break;
        }
      }
    },
    output() {

      if (this.$type === "envelope") {
        this.currentRow.map((item) => {
          const newIndex = this.tableFormatData.userTable.tableData.findIndex(
            (tableItem) => {
              return tableItem.id === item;
            }
          );
          const oldIndex = this.displayData.findIndex((displayItem) => {
            return displayItem.id === item;
          });
          if (newIndex !== -1 && oldIndex === -1) {
            this.displayData.push(
              this.tableFormatData.userTable.tableData[newIndex]
            );
          }
          console.log(newIndex, "newIndex");
        });
      }
      if (
        Object.prototype.toString.call(this.changeEvt) === "[object Function]"
      ) {
        this.filesOutPutChooes();
        //抽奖加上期数
        if(this.$type === "lottery" && this.config.params_type && this.config.params_type=='periods_radio' ){

            this.displayData=[{...this.lotteryRow,period_id:this.hasChooseLottery.luck_period_id}]
        }

           console.log(this.displayData,"this.displayData");
        this.changeEvt(
          {
            currentRow: this.currentRow,
            displayData: this.displayData,
            listData: this.listData,
            listRow: this.listRow,
            files: this.tableFormatData.userTable.files,
            key: "ChooseLink",
          },
          this.updateConfig.bindKey
        );
      }

    },
  },
};
</script>

<style lang="scss" scoped>
.choose-userlist {
  font-size: 14px;
  margin-bottom: 10px;

  /deep/ .custorm-mobile .el-input__inner {
    height: 32px !important;
  }

  .dialogChange {
    width: 50%;
  }

  .dialogTextChange {
    width: 200px;
  }

  @media screen and (max-width: 1700px) {
    .dialogTextChange {
      width: 140px;
    }
  }

  @media screen and (max-width: 1400px) {
    .dialogChange {
      width: 100%;
    }
  }

  /deep/ .is-checked {
    color: #409eff;
  }

  /deep/ .pagination-content .el-input {
    width: 100px;
  }

  .group-box {
    border: 1px solid rgb(199, 198, 198);
    padding: 14px;
    width: 48%;
    margin: 0 14px 14px 0;
    border-radius: 3px;
    position: relative;
  }

  // @media only screen and (max-width: 1800px) {
  //     .group-box {
  //         width: 45%;
  //     }
  // }

  .group-icon {
    position: absolute;
    background: #fd463e;
    color: #fff;
    padding: 0 6px;
    line-height: 20px;
    border-radius: 8px;
    font-size: 12px;
    height: 20px;
    zoom: 0.8;
  }

  .tag-list .el-tag {
    width: auto;
    white-space: nowrap;
    text-overflow: ellipsis;

    & + .el-tag {
      margin-left: 5px;
    }
  }

  .wlm-dialog-main {
    max-height: 520px;
  }

  /deep/ .is-horizontal {
    display: none;
  }

  /deep/ .el-scrollbar__view {
    font-size: 16px;
  }

  .link-menu {
    width: 200px;
    max-height: 520px;
    padding-bottom: 12px;
    padding-right: 65px;
    overflow-x: hidden;

    /deep/ .el-menu {
      border: none;

      .el-submenu {
        .el-submenu__title {
          background-color: transparent;
        }

        &.is-active,
        &.is-opened {
          .el-submenu__title {
            color: #409eff !important;

            .el-submenu__icon-arrow {
              color: #409eff !important;
            }
          }
        }
      }

      .el-menu-item {
        padding: 0 !important;
        width: 134px;
        min-width: 134px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        overflow: hidden;

        &.is-active {
          text-align: center;
          border-radius: 5px;
          font-size: 14px;
          border-color: transparent;
          width: 100%;
          color: #409eff !important;
          background: #c3e1fe !important;
        }
      }
    }
  }

  .group-item-btn .el-button {
    width: 80px;
    background: transparent;

    &:not(.is-not) {
      color: #409eff;
    }

    &.is-not {
      border-color: transparent;
      color: #fff !important;
      background: rgb(203, 203, 203) !important;
    }

    &.is-active {
      border-color: transparent;
      color: #fff !important;
      background: #409eff !important;
    }

    &.is-disabled {
      border-color: transparent;
      color: #fff !important;
      background: #c0c4cc !important;
    }
  }

  .goods-list-box {
    width: 100%;
    min-height: 520px;
    padding: 20px 20px 30px;
    margin-top: -20px;
    border-left: 1px solid #f2f2f2;

    /deep/ .goods-serch {
      position: relative;
      margin-bottom: 20px;
      text-align: left;

      .el-input__inner {
        width: 200px;
        border: none;
        background: rgb(237, 237, 237);
        border-radius: 20px;
        font-size: 12px;
      }

      i {
        cursor: pointer;
        left: 200px;
        margin-left: -35px;
        font-size: 20px;
      }
    }

    .goods-list {
      width: 50%;

      &:not(:nth-last-child(1)) {
        padding-bottom: 20px;
      }

      .goods-item {
        border: 1px solid #d8d1d1;
        margin-right: 20px;
        padding: 8px 10px;
        border-radius: 5px;

        .img-center {
          border-radius: 10px;
          width: 90px;
          height: 80px;
        }

        .scale-grow {
          padding: 0 5px;
        }

        .ellipsis {
          width: 100%;
          font-size: 13px;
          text-align: left;
          margin-bottom: 20px;

          & + p.flex-row {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
